<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会基本信息设置
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">设置竞赛项目</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="box-top">
                <el-button type="warning" @click="adddialogVisible = true">新增</el-button>
            </div>
            <el-table :data="currentPageData" border stripe>
                <el-table-column prop="msid" label="编号" width="60">
                </el-table-column>
                <el-table-column prop="cname" label="项目">
                </el-table-column>
                <el-table-column prop="distance" label="全长">
                </el-table-column>
                <el-table-column label="赛类">
                    <template #default="scope">
                        {{ matchstyle[scope.row.relay] }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="编排模式">
                    <template #default="scope">
                        {{ orcmode[scope.row.sot] }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="gtime" label="时间">
                </el-table-column>
                <el-table-column label="泳道">
                    <template #default="scope">
                        {{ scope.row.sno }} ~ {{ scope.row.eno }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="230">

                    <template #default="scope">
                        <el-button v-if="matchstyle[scope.row.relay] === '全能'" type="success"
                            @click="viewselItemdialog(scope.row)">查看</el-button>
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                        <el-button type="danger" @click="pcdelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total,prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>
        </el-card>

        <!-- 添加页面 -->
        <el-dialog title="添加竞赛项目" v-model="adddialogVisible" draggable width="40%" :before-close="addleClose">
            <el-form :model="addfrom" label-width="100" :rules="rules" ref="addForm">
                <el-form-item prop="msid" label="编号：">
                    <el-input v-model.number="addfrom.msid"></el-input>
                </el-form-item>
                <el-form-item label="项目距离：">
                    <el-input v-model="addfrom.subname"></el-input>
                </el-form-item>
                <el-form-item prop="tname" label="泳式名称：">
                    <el-input v-model="addfrom.tname"></el-input>
                </el-form-item>
                <el-form-item prop="relay" label="赛类：">
                    <el-select v-model.number="addfrom.relay">
                        <el-option v-for="(item, index) in matchstyle" :key="index" :label="item"
                            :value="index"></el-option>
                        <!-- <el-option v-for="item in formattedMatchstyle" :key="item.value" :label="item.name"
                            :value="item.value"></el-option> -->
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="编排模式：">
                    <el-select v-model="addfrom.sot">
                        <el-option v-for="(item, index) in orcmode" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item prop="distance" label="赛程全长：">
                    <el-input v-model.number="addfrom.distance"></el-input>
                </el-form-item>
                <el-form-item prop="gtime" label="时间(分)：">
                    <el-input v-model.number="addfrom.gtime"></el-input>
                </el-form-item>
                <el-form-item label="泳道：" class="lane-in">
                    <el-input v-model.number="addfrom.sno"></el-input>
                    <p class="lane-l">~</p>
                    <el-input v-model.number="addfrom.eno"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addleClose">取 消</el-button>
                <el-button type="primary" @click="addpc">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改页面 -->
        <el-dialog title="设置项目基础信息 修改" v-model="editdialogVisible" draggable width="40%" :before-close="handleClose">
            <el-form :model="editfrom" label-width="90">
                <el-form-item label="编号：">
                    <span>{{ editfrom.msid }}</span>
                </el-form-item>
                <el-form-item label="项目距离：">
                    <el-input v-model="editfrom.subname"></el-input>
                </el-form-item>
                <el-form-item label="泳式名称：">
                    <el-input v-model="editfrom.tname"></el-input>
                </el-form-item>
                <el-form-item label="赛类：">
                    <el-select v-model="editfrom.relay">
                        <el-option v-for="(item, index) in matchstyle" :key="index" :label="item"
                            :value="index"></el-option>
                        <!-- <el-option v-for="item, in formattedMatchstyle" :key="item.value" :label="item.name"
                            :value="item.value"></el-option> -->
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="编排模式：">
                    <el-select v-model="editfrom.sot">
                        <el-option v-for="(item, index) in orcmode" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="赛程全长：">
                    <el-input v-model="editfrom.distance"></el-input>
                </el-form-item>
                <el-form-item label="时间(分)：">
                    <el-input v-model="editfrom.gtime"></el-input>
                </el-form-item>
                <el-form-item label="泳道：" class="lane-in">
                    <el-input v-model="editfrom.sno"></el-input>
                    <p class="lane-l">~</p>
                    <el-input v-model="editfrom.eno"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="editpcinfo">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 查看页面 -->
        <el-dialog title="运动员详细信息" v-model="datailsdialogVisible" draggable width="40%">
            <el-table :data="datailsData.msidVos" border stripe>
                <el-table-column label="单项目" width="80">
                    <template #default="scope">
                        <el-checkbox v-model="scope.row.flag" :true-label="1" :false-label="0"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="msidName" label="项目名称">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="datailsdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSportsigeinfo">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            multipleSelection: '',
            tableData: [],
            matchstyle: [],
            formattedMatchstyle: [],
            orcmode: [],
            adddialogVisible: false,
            addfrom: {
                msid: null,
                subname: '',
                tname: '',
                relay: null,
                sot: null,
                distance: null,
                gtime: null,
                sno: null,
                eno: null,
                cname: ''
            },
            initialForm: {},
            editdialogVisible: false,
            editfrom: {},
            // 分页
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            // 查看
            datailsData: {},
            datailsdialogVisible: false,
            rules: {
                msid: [
                    { required: true, message: '请输入编号', trigger: 'blur' },
                ],
                tname: [
                    { required: true, message: '请输入泳式名称', trigger: 'blur' },
                ],
                relay: [
                    { required: true, message: '请选择赛类', trigger: 'change' },
                ],
                distance: [
                    { required: true, message: '请输入全长', trigger: 'blur' },
                ],
                gtime: [
                    { required: true, message: '请输入时间', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        this.initialForm = { ...this.addfrom }
        this.postPcbasicininfoList();
        this.postMatchStyleinfoList();
        this.postOrcModeinfoList();
    },
    methods: {
        // 查询
        async postPcbasicininfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/contest/getmsg');
                if (result.data.code == 0) {
                    this.tableData = result.data.data
                    this.tableData.sort((a, b) => a.msid - b.msid)
                    this.total = this.tableData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async postMatchStyleinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/contest/getMatchStyleMsg');
            if (result.data.code == 0) {
                this.matchstyle = result.data.data
                // this.formattedMatchstyle = this.matchstyle.map((style, index) => {
                //     return { value: index, name: style };
                // }).filter(item => item.value !== 2);
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async postOrcModeinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/contest/getOrcMode');
            if (result.data.code == 0) {
                this.orcmode = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 删除单条数据
        pcdelete(e) {
            this.$confirm('此操作将删除改条数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const result = await this.$http.post(this.BACKEND_URL + '/contest/deletemsg', e)
                if (result.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.postPcbasicininfoList()
                } else if (result.data.code == 500) {
                    this.$message.error(result.data.msg)
                }
            }).catch(() => {
            });
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.editfrom = info
        },
        // 查看
        async viewselItemdialog(val) {
            this.datailsdialogVisible = true
            const result = await this.$http.get(this.BACKEND_URL + '/mul/getmsg', {
                params: {
                    msid: val.msid
                }
            })
            if (result.data.code == 0) {
                this.datailsData = result.data.data
            } else if (result.data.code == 500) {
                this.$message.error(result.data.msg)
            }
        },
        async editSportsigeinfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/mul/updatemsg', this.datailsData)
            if (result.data.code == 0) {
                this.datailsdialogVisible = false
                this.$message.success('保存成功')
            } else if (result.data.code == 500) {
                this.$message.error(result.data.msg)
            }
        },
        // 新增数据
        async addpc() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    this.addfrom.cname = this.addfrom.subname + this.addfrom.tname
                    this.addfrom.sot = parseInt(this.addfrom.sot);
                    const result = await this.$http.post(this.BACKEND_URL + '/contest/insertmsg', this.addfrom)
                    if (result.data.code == 0) {
                        this.adddialogVisible = false
                        this.postPcbasicininfoList()
                        this.$message.success('添加成功')
                        this.addfrom = { ...this.initialForm }
                    } else if (result.data.code == 500) {
                        this.addfrom = { ...this.initialForm }
                        this.$message.error(result.data.msg)
                    }
                } else {
                    this.$message.error('请填写必要信息');
                }
            });
        },
        addleClose() {
            this.adddialogVisible = false
            this.addfrom = { ...this.initialForm }
        },
        // 修改
        async editpcinfo() {
            this.editfrom.cname = this.editfrom.subname + this.editfrom.tname
            const result = await this.$http.post(this.BACKEND_URL + '/contest/updatemsg', this.editfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.postPcbasicininfoList()
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.postPcbasicininfoList()
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.postPcbasicininfoList()
        },
        handleClose(done) {
            this.postPcbasicininfoList()
            done()
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.tableData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.tableData.slice(startIndex, endIndex);
        }
    },
}
</script>

<style lang="less" scoped>
.box-card {
    margin-top: 15px;

    .box-top {
        float: left;
        margin-bottom: 15px;
    }
}

// 操作按钮
:deep(.cell) {
    text-align: center;
}

// .el-dialog {
//     .el-checkbox {
//         margin-left: 50px;
//     }
// }

.lane-in {
    .el-input {
        width: 100px;
    }
}

.lane-l {
    margin: 0 5px;
}

.paging {
    margin-top: 15px;
}

.dialog-footer {
    margin-top: 15px;
}
</style>